<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>05.组件化开发电影列表</title>
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class App extends React.Component {
        // 继承react的组件类
        // 组件数据(这里和js类一样，参与交互(界面)更新的数据，和常量数据)
        constructor() {
          super()
          // 参与界面更新的数据必须定义在类的属性为state的对象中
          this.state = {
            msg: "test"
          }
        }

        //    组件方法
        changeText() {
          this.setState({
            // 来自于React.Component类,内部做两件事：1. 对比修改值的需求 2. 自动重新执行render函数
            msg: "success react"
          })
        }

        //    渲染内容 render方法
        render() {
          return (
            <div>
              <MovieList />
              <button onClick={this.changeText.bind(this)}>改变</button>
            </div>
          )
        }
      }

      // 案例：循环电影列表
      class MovieList extends React.Component {
        constructor() {
          super()
          this.state = {
            movieList: ["电影1", "电影2", "电影3"]
          }
          this.test = this.test.bind(this)
        }

        test() {
          // 注解1：这里一定要写return , 因为map需要返回一个数据放到下面才能有数组，数组放进去react会自动遍历渲染才能有值（微信小程序这里也是这样):const test = new MovieList();console.log(test.test())
          return this.state.movieList.map((item) => <li>{item}</li>)
        }

        render() {
          return (
            <div id={"电影列表"}>
              {this.test()}
              {true}
            </div>
          )
        }
      }

      // 2. 将组件渲染到页面上
      const root = ReactDOM.createRoot(document.getElementById("root"))
      root.render(<App />) // 可以渲染html元素，也可以渲染自定义组件，这和vue是一样的
    </script>
  </body>
</html>
